<template>
	<view class="u-page">
		<u-loading-page v-if="loading" :loading="true"> </u-loading-page>
		<view v-else>
			<view v-if="list.length">
				<u-list :scrollTop='scrollTop' :pagingEnabled='true' @scrolltolower="scrolltolower" @scroll='scroll'>
					<u-list-item v-for="(item, index) in list" :key="index">
						<slot name="item-box" :item="item" :index="index"></slot>
					</u-list-item>
				</u-list>
				<u-loadmore :status="status" />
			</view>

			<u-empty v-else />
			<u-back-top :scroll-top="scrollTop" @click="backTop"></u-back-top>
		</view>
	</view>
</template>

<script>
	export default {
		name: "app-list",
		props: {
			url: {
				typeof: String,
				default: []
			},
		},
		data() {
			return {
				scrollTop: 0,
				status: 'loadmore',
				loading: true,
				list: [],
				urls: ['https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},
		created() {
			this.loadmore()
		},
		methods: {
			backTop() {
				this.scrollTop = 0
			},
			scroll(e) {
				this.scrollTop = e
			},
			scrolltolower() {
				this.loadmore()
			},
			async loadmore() {
				if (this.status != 'loadmore') {
					return
				}
				this.status = 'loading';
				setTimeout(() => {
					for (let i = 0; i < 30; i++) {
						this.list.push({
							url: this.urls[uni.$u.random(0, this.urls.length - 1)]
						})
					}
					if (this.list.length > 60) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
					this.loading = false;
				}, 2000)


			}
		}
	}
</script>

